<template>
  <div>father
    <!-- <child-vue :a="aa"></child-vue> -->
    <el-button @click="add">add</el-button>
    <ul>
      <li v-for="item in list">{{item.path}}</li>
    </ul>
    {{r.length}}
  </div>
</template>

<script>
import childVue from "./child.vue"
export default {
  components:{childVue},
  async created(){
    // console.log('father begin');
    // // this.aa=1
    // await setTimeout(() => {
    //   console.log('wait set ');
    //   this.aa=2
    // }, 10);
    // console.log('father end');

    console.log(this.$router.getRoutes());
    this.list=this.$router.getRoutes()
  },
  // watch:{    
  //   r:{
  //     deep:true,
  //     handler(n,o){
  //       console.log('router changed');
  //     }
  //   }
  // },
  methods:{
    add(){
      this.$router.addRoute({
        path:"/abcd",
        name:"test add new route",
        components:()=>import("../demos/demo.vue")
      })
    }
  },
  computed:{
    r(){
      return this.$router.getRoutes()
    }
  },
  data(){
    return {
      aa:null,
      list:[]
    }
  }
}
</script>

<style>

</style>